<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/role/roleList' }">角色列表</el-breadcrumb-item>
      <el-breadcrumb-item>分配用户</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-form-item prop="loginName" label="账户">
              <el-input v-model="queryInfo.loginName" />
            </el-form-item>
            <el-form-item prop="name" label="姓名">
              <el-input v-model="queryInfo.name" />
            </el-form-item>
          </template>
        </autumn-search>
      </div>

      <!-- 已授权用户数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @handleChange="changePage">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" @click="toGrant">新增</el-button>
            <el-button icon="el-icon-back" @click="cancel">返回</el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="loginName" label="账户" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="性别" width="80" align="center">
              <template #default="scope">
                <el-tag size="small" :type="scope.row.gender == 2 ? 'warning' : 'success'">{{ scope.row.gender == 2 ?
                    '女'
                    : '男'
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="address" label="常住地址" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="80" align="center" fixed="right">
              <template #default="scope">
                <el-button-group>
                  <el-button type="danger" icon="el-icon-delete" size="small" title="移除" @click="del(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>

    <!-- 授权弹窗 -->
    <el-dialog title="分配用户" v-model="showDialog" width="50%" top="10vh" :close-on-click-modal="false"
      @close="handleClose">
      <!-- 搜索栏 -->
      <autumn-search :model="subQuery" @search="subSearch">
        <template #default>
          <el-form-item prop="loginName" label="用户名">
            <el-input v-model="subQuery.loginName" />
          </el-form-item>
          <el-form-item prop="name" label="姓名">
            <el-input v-model="subQuery.name" />
          </el-form-item>
        </template>
      </autumn-search>
      <!-- 未授权用户数据表格 -->
      <autumn-table ref="subTableRef" :height="'35vh'" :page="subPage" @handleChange="changeSubPage"
        @changeSelect="changeSelect">
        <template #button>
          <el-button type="primary" icon="el-icon-tools" :disabled="disable" @click="grant">确定
          </el-button>
        </template>
        <template #column>
          <el-table-column type="selection" fixed="left" />
          <el-table-column prop="loginName" label="用户名" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column label="性别">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.gender == 2 ? 'warning' : 'success'">{{ scope.row.gender == 2 ? '女'
                  :
                  '男'
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column prop="address" label="常住地址" />
          <el-table-column prop="remark" label="备注" />
        </template>
      </autumn-table>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { listUnCheckeAccount, listCheckedAccount, grantAccount, releaseAccount } from 'src/api/system/role'
import useTable from 'src/hooks/useTable'
import { $confirmMsg } from 'src/hooks/useCommon'

const { page, initIndex } = useTable()
const route = useRoute()
const router = useRouter()

// 查询主表
const queryInfo = reactive({
  roleId: '',
  loginName: '',
  name: ''
})
queryInfo.roleId = route.query.id as string
function changePage(pageNumber: number, pageSize: number) {
  page.pageNumber = pageNumber
  page.pageSize = pageSize
  listCheckedAccount({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
}
const search = () => {
  changePage(1, 10)
}
search()

// 查询子表
const subTableRef = ref()
const subQuery = reactive({
  roleId: '',
  loginName: '',
  name: ''
})
subQuery.roleId = route.query.id as string
const subPage = reactive({
  pageNumber: 1,
  pageSize: 10,
  data: [],
  total: 0
})
function changeSubPage(pageNumber: number, pageSize: number) {
  subPage.pageNumber = pageNumber
  subPage.pageSize = pageSize
  listUnCheckeAccount({ ...subQuery, pageNumber, pageSize }).then(({ data }) => {
    subPage.data = data.list
    subPage.total = data.total
  })
}
const subSearch = () => {
  changeSubPage(1, 10)
}

const disable = ref<boolean>(true)
const changeSelect = (selection: Array<any>) => {
  disable.value = selection.length === 0
}

const del = (row: any) => {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    releaseAccount(ids).then(() => {
      search()
    })
  })
}

// 授权
const showDialog = ref<boolean>(false)
const toGrant = () => {
  subSearch()
  showDialog.value = true
}
const grant = () => {
  const selection = subTableRef.value.$refs.dataTableRef.getSelectionRows()
  if (!selection || selection.length === 0) {
    return
  }
  const accountIds: Array<any> = []
  selection.forEach(function (item: any) {
    accountIds.push(item.id)
  })
  console.log('subQuery.roleId == ', subQuery.roleId)
  console.log('accountIds == ', accountIds)
  grantAccount({ id: subQuery.roleId, accountIds }).then(() => {
    search()
  })
  showDialog.value = false
}
const handleClose = () => {
  search()
}

// 取消
const cancel = () => {
  router.push('/system/role/roleList')
}
</script>

<style lang="scss" scoped>
</style>
